<template>
    <el-form :model="properties" ref="formRef" :rules="formRules" labelWidth="auto">
        <el-form-item label="组件编码" prop="code">
            <el-input v-model="properties.code" placeholder="组件编码" clearable />
        </el-form-item>

        <el-form-item label="label名称" prop="labelName">
            <el-input v-model="properties.labelName" placeholder="label名称" clearable />
        </el-form-item>

        <el-form-item label="允许半选" prop="isAllowHalf">
            <el-switch v-model="properties.isAllowHalf" />
        </el-form-item>

        <el-form-item label="展示分数" prop="isShowScore">
            <el-switch v-model="properties.isShowScore" />
        </el-form-item>

        <el-form-item label="分数模板" prop="scoreTemplate" v-if="properties.isShowScore">
            <el-input v-model="properties.scoreTemplate" placeholder="分数模板" clearable />
        </el-form-item>

        <el-form-item label="最大分值" prop="max">
            <el-input-number v-model="properties.max" :min="1" :max="10"/>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts" name="YwuFormRateDrawer">
import {computed, defineProps, ref} from "vue";

let props = defineProps(['properties']);

let properties = computed(() => {return props['properties']})

const formRef = ref(null)

const formRules = ref({
    labelName: [
        { required: true, message: '请输入label名称', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入组件编码', trigger: 'blur' }
    ],
    scoreTemplate: [
        { required: true, message: '请输入分数模板', trigger: 'blur' }
    ],
    max: [
        { required: true, message: '请输入最大分值', trigger: 'blur' }
    ]
})

const validateForm = () => {
    return formRef.value?.validate()
}

defineExpose({
    validateForm
})
</script>

<style scoped lang="less">

</style>